<template>
  <div class="cart">
    <header>
      <i class="iconfont icon-zuojiantou" @click="goBack"></i>
      <span>购物车</span>
      <span
        class="iconfont"
        @click="changeNav"
        v-text="isNav ? '完成' : '编辑'"
      ></span>
    </header>
    <section v-show="goodsInfo.length">
      <div class="title">
        <van-checkbox
          :value="isCheckedAll"
          class="ccc"
          @click="checkAllFn"
        ></van-checkbox>
        <span>商品</span>
      </div>
      <ul class="cartList">
        <li class="cartListLi" v-for="(item, index) in goodsInfo" :key="index">
          <div>
            <van-checkbox
              v-model="item.checked"
              class="ddd"
              @click="checkItem(index)"
            ></van-checkbox>
          </div>
          <h2>
            <img :src="item.goods_imgUrl" alt="" />
          </h2>

          <div class="right">
            <h3>{{ item.goods_name }}</h3>
            <p>
              ￥<span>{{ item.goods_price }}</span>
            </p>

            <i
              class="iconfont icon-lajixiang"
              @click="deleteGoods(item.id)"
            ></i>
            <van-stepper
              v-model="item.goods_num"
              integer
              class="eee"
              @change="changeNum($event, item)"
            />
          </div>
        </li>
      </ul>
    </section>
    <footer v-show="goodsInfo.length">
      <div class="check">
        <van-checkbox :value="isCheckedAll" @click="checkAllFn"></van-checkbox>
      </div>
      <div class="center" v-show="!isNav">
        <div>
          共有
          <span>{{ total.num }}</span>
          件商品
        </div>
        <div>
          <span>总计:</span>
          <span class="price">￥{{ total.price.toFixed(2) }} + 羽币</span>
        </div>
      </div>
      <div class="pay" v-if="!isNav" @click="goOrder">去结算</div>
      <div class="pay" v-else @click="deleteGoods">删除</div>
    </footer>
    <div v-show="!goodsInfo.length">
      <span>没有购物车数据</span>
      <router-link to="/home" class="goHome">去首页逛逛吧</router-link>
    </div>
  </div>
</template>

<script>
import http from "@/common/request";
import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
import { Toast } from "vant";
export default {
  name: "Cart",
  components: {},
  data() {
    return {
      isNav: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    ...mapMutations("goods", ["checkItem"]),
    ...mapActions("goods", ["checkAllFn", "deleteGoods"]),
    ...mapMutations("order", ["initOrder"]),
    changeNav() {
      this.isNav = !this.isNav;
    },
    goBack() {
      this.$router.back();
    },
    async getData() {
      let res = await http.$axios({
        url: "/api/cartData",
        headers: {
          // 是否需要用户验证
          token: true,
        },
      });
      // console.log(res.data.data);
      res.data.data.forEach((v) => {
        v["checked"] = true;
      });
      this.$store.commit("goods/addGoods", res.data.data);
    },
    async changeNum(value, item) {
      // console.log(value,item);
      let res = await http.$axios({
        method: "post",
        url: "/api/updateNum",
        data: {
          num: value,
          id: item.id,
        },
      });
      console.log(res);
    },
    async goOrder() {
      console.log(this.gi);
      if (this.selectList.length > 0) {
        let newList = [];
        this.goodsInfo.forEach((item) => {
          this.selectList.filter((v) => {
            if (v == item.id) {
              newList.push(item);
            }
          });
        });
        // console.log(newList);

        // 发送生成订单的请求
        let res = await http.$axios({
          url: "/api/addOrder",
          method: "post",
          headers: {
            // 是否需要用户验证
            token: true,
          },
          data: {
            arr: newList,
          },
        });
        console.log(res);
        if (res.success) {
          // 将订单号存入VUEX
          this.initOrder(res.data);
          // 跳转页面
          this.$router.push({
            path: "/order",
            query: {
              detail: this.selectList,
              goodsList: JSON.stringify(this.gi) 
            },
          });
        }
      } else {
        Toast("请至少选择一件商品");
      }
    },
  },
  computed: {
    ...mapState("goods", ["goodsInfo", "selectList"]),
    ...mapGetters("goods", ["isCheckedAll", "total"]),
    gi() {
      return this.selectList.map((i) => {
        return this.goodsInfo.find((v) => v.id == i);
      });
    },
  },
};
</script>

<style scoped>
.goHome {
  color: red;
}
.ccc {
  padding: 0 3vw;
}
.title {
  height: 40px;
  display: flex;
  border-bottom: 1px solid #aaa;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
}
.cartListLi {
  display: flex;
  align-items: center;
  height: 100px;
}
.cartListLi p {
  padding-top: 10px;
  color: red;
  font-size: 16px;
}
.right {
  height: 100%;
  padding-top: 10px;
  margin-left: 5px;
  position: relative;
  width: 100%;
}
.icon-lajixiang {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 28px;
  height: 25px;
  width: 25px;
}
.eee {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.ddd {
  padding: 0 3vw;
}
.cartListLi h2 {
  background-color: #f5f5f5;
  width: 80px;
  height: 80px;
}
h2 img {
  width: 100%;
  height: 100%;
}
h3 {
  width: 200px;
  font-size: 14px;
}
.cartList {
  display: flex;
  flex-direction: column;
  background-color: #eee;
}
.cart {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}
section {
  flex: 1;
}
footer {
  display: flex;
  justify-content: space-between;
  height: 50px;
  background-color: #eee;
  align-items: center;
}
footer .check {
  width: 10vw;
  padding-left: 3vw;
}
footer .pay {
  width: 25vw;
  height: 100%;
  background-color: red;
  color: #eee;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
}
footer .center {
  flex: 1;
  padding-left: 3vw;
  font-size: 14px;
}
.price {
  color: red;
}
header {
  height: 40px;
  background-color: rgba(210, 0, 0, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #eee;
}
header i {
  height: 100%;
  width: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}
.iconfont {
  font-size: 16px;
  padding-right: 10px;
}
header span {
  font-size: 18px;
}
</style>

